page {
  background: #EAECF6;
}
.bg {
  z-index: -1;
  position: absolute;
  top: 0;
  width: 100%;
}
.content {
  position: relative;
  padding: 0 48rpx; 
  image {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 249rpx;
    height: 249rpx;
    border-radius: 50%;
  }
  .info {
    width: 100%;
    padding-bottom: 20rpx;
    .main {
      padding: 149rpx 30rpx 53rpx 30rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      .detail-title {
        display: flex;
        justify-content: center;
        padding-bottom: 33rpx;
        height: 45rpx;
        border-bottom: 1px dashed #EAECF6;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #000000;
        line-height: 45rpx;
        font-style: normal;
      }
      .user-info {
        position: relative;
        .circle-one,
        .circle-two {
          position: absolute;
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background: #EAECF6;
        }
        .circle-one {
          left: -30rpx;
          transform: translate(-50%, -50%);
        }
        .circle-two {
          right: -30rpx;
          transform: translate(50%, -50%);
        }
        .title {
          padding-top: 39rpx;
          padding-bottom: 16rpx;
          border-bottom: 1rpx solid #EBEBEB;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #000000;
          line-height: 33rpx;
          font-style: normal;
        }
        .detail-info {
          display: flex;
          justify-content: space-between;
          padding: 33rpx 0 7rpx;
          .name {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            font-style: normal;
          }
          .detail {
            display: flex;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #000000;
            font-style: normal;
            .sex {
              margin-right: 10rpx;
            }
          }
        }
        .phone {
          margin-top: 7rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #838383;
          font-style: normal;
        }
      }
      .test-info {
        .title {
          padding: 29rpx 0 16rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #838383;
          font-style: normal;
        }
        .project-name,
        .project-num,
        .progress{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 27rpx 0;
          border-top: 1rpx solid #EBEBEB;
          .text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: #000000;
            line-height: 37rpx;
          }
          .value {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            line-height: 37rpx;
          }
        }
        .progress-name {
          .value {
            color: #000000;
          }
        }
        .project-num {
          color: #8A47FD;
        }
        .progress {
          color: rgba(0,0,0,0.5);
        }
        .progress-line {
          position: relative;
          display: flex;
          justify-content: center;
          margin: 16rpx 33rpx 19rpx 21rpx;
          .submit,
          .accept,
          .loading,
          .report{
            display: flex;
            align-items: center;
            width: 100%;
            .circle {
              flex-shrink: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 30rpx;
              height: 30rpx;
              border-radius: 50%;
              background: linear-gradient(180deg, rgba(201, 105, 255, 1), rgba(152, 152, 255, 1));
              .in-circle {
                width: 16rpx;
                height: 16rpx;
                background-color: #fff;
                border-radius: 50%;
              }
              .ing {
                background-color: #7F36FE;
              }
            }
            .line {
              flex: 1;
              border: 1px solid #A069FF;
            }
            .undo-circle {
              background: #c9c9c9;
            }
            .line-undo {
              border: 1px solid #c9c9c9;
            }
          }
          .report {
            width: 30rpx;
          }
        }
        .status-text {
          display: flex;
          justify-content: space-between;
          font-weight: 400;
          font-size: 24rpx;
          font-style: normal;
          .pass {
            color: #C86AFF;
          }
          .ing {
            color: #8A47FD;
          }
          .undo {
            color: #C9C9C9;
          }
        }
      }
    }
  }
}